<template>
  <!-- <v-card color="info" dark>
    <v-card-text class="d-flex flex-column"> -->
  <!-- <v-card-title>
      <v-icon size="1.5rem" color="white" class="me-2">
        {{ icons.mdiCheckboxMarkedCircle }}
      </v-icon>
    </v-card-title> -->
  <!-- <v-card-title>
        <div class="white--text">欢迎</div>
      </v-card-title> -->
  <!-- <v-card-text class="white--text">
      {{ personData.text }}
    </v-card-text> -->
  <!-- <v-card-actions class="pl-1 pr-0">
        <v-avatar size="50">
          <v-img :src="require(`@/assets/images/avatars/${personData.avatarImg}`)"></v-img>
        </v-avatar>
        <span @click="gotoProfile" class="white--text pl-8 pt-0 px-0 cursor-pointer" style="font-weight: bold; font-size: 25px">{{ personData.name }}</span>
      </v-card-actions>
      <v-divider style="border-width: 1.5px 0 0 0; border-color: #dfdfdf"></v-divider>
      <v-card-actions class="justify-space-between pt-2 pl-0 pr-0">
        <div class="white--text" style="text-align: center">
          <div class="pt-1 cardContentWord">{{ personData.domain }}</div>
          <div class="cardTitleWord">关注领域</div>
        </div>
        <div class="white--text" style="text-align: center">
          <div class="pt-1 cardContentWord">{{ personData.likes }}</div>
          <div class="cardTitleWord">收藏</div>
        </div>
        <div class="white--text" style="text-align: center">
          <div class="pt-1 cardContentWord">{{ personData.following }}</div>
          <div class="cardTitleWord">关注学者</div>
        </div>
      </v-card-actions>
    </v-card-text>
  </v-card> -->
  <v-card>
    <v-img class="white--text align-end" src="@/assets/images/pages/card-basic-person.png" height="100" />
    <v-card-text class="position-relative">
      <!-- User Avatar -->
      <v-avatar size="60" color="white" class="avatar-center">
        <v-img :src="personData.avatarImg"></v-img>
      </v-avatar>
      <!-- Title, Subtitle & Action Button -->
      <div class="d-flex justify-space-between flex-wrap pt-10">
        <div class="me-2 mb-2">
          <v-card-title @click="gotoProfile" class="pt-0 px-0 cardUserName cursor-pointer"> {{ personData.name }} </v-card-title>
          <v-card-subtitle class="pt-2 pa-0" style="font-size: 15px">欢迎</v-card-subtitle>
        </div>
      </div>
      <v-divider class="mt-3 mb-3"></v-divider>
      <div class="d-flex justify-space-between align-center mt-2">
        <span style="color: #9155fd" class="cardTitleWord"> {{ personData.domain }} </span>
        <span>
          <v-card-text @click="gotoPersonal('/domains')" class="cardContentWord mr-5 cursor-pointer">关注领域</v-card-text>
          <v-icon size="2rem" color="primary" class="me-2">
            {{ icons.mdiDomain }}
          </v-icon>
        </span>
      </div>
      <div class="d-flex justify-space-between align-center mt-2">
        <span style="color: #ffb400" class="cardTitleWord"> {{ personData.following }} </span>
        <span>
          <v-card-text @click="gotoPersonal('/follows')" class="cardContentWord mr-5 cursor-pointer">关注学者</v-card-text>
          <v-icon size="2rem" color="warning" class="me-2">
            {{ icons.mdiAccountGroup }}
          </v-icon>
        </span>
      </div>
      <div class="d-flex justify-space-between align-center mt-2">
        <span style="color: #ff4c51" class="cardTitleWord"> {{ personData.likes }} </span>
        <span>
          <v-card-text @click="gotoPersonal('/stars')" class="cardContentWord mr-5 cursor-pointer">收藏</v-card-text>
          <v-icon size="2rem" color="error" class="me-2">
            {{ icons.mdiHeart }}
          </v-icon>
        </span>
      </div>
    </v-card-text>
  </v-card>
</template>

<script>
// eslint-disable-next-line object-curly-newline
import { mdiHeart, mdiCheckboxMarkedCircle, mdiAccountGroup, mdiAccountDetails, mdiDomain } from "@mdi/js";
import axios from "axios";
export default {
  props: ["userId"],
  setup() {
    return {
      icons: {
        mdiHeart,
        mdiCheckboxMarkedCircle,
        mdiAccountGroup,
        mdiAccountDetails,
        mdiDomain,
      },
    };
  },
  data() {
    return {
      personData: {
        // userId: 0,
        icon: "mdi-checkbox-marked-circle",
        name: "",
        avatarImg: "1.png",
        domain: "",
        likes: "",
        following: "",
      },
    };
  },
  methods: {
    gotoProfile() {
      this.$router.push("/profile");
    },
    gotoPersonal(str) {
      this.$router.push("/personal" + str);
    },
    getUser() {
      const that = this;
      axios.get("https://api.dreamhub.moyunbook.xyz/user/" + this.userId + "/").then(function (response) {
        const data = response.data;
        console.log(data);
        that.personData.name = data.username;
        that.personData.avatarImg = data.profile.avatar;
      });
      axios.get("/api/follow/").then(function (response) {
        const data = response.data;
        // console.log(data);
        that.personData.following = data.count;
      });
      axios.get("/api/collection/").then(function (response) {
        const data = response.data;
        console.log(data);
        that.personData.likes = data.count;
      });
      axios.get("/api/topic/").then(function (response) {
        const data = response.data;
        // console.log(data);
        that.personData.domain = data.count;
      });
    },
  },
  mounted() {
    this.getUser();
  },
};
</script>

<style>
.cardUserName {
  font-weight: bold;
  font-size: 22px;
}
.cardTitleWord {
  font-size: 20px;
  font-weight: bold;
}
.cardContentWord {
  font-size: 16px;
  font-weight: bold;
  color: gray;
  display: inline;
  padding: 0;
}
.avatar-center {
  top: -2rem;
  left: 1rem;
  border: 3px solid white;
  position: absolute;
}
</style>
